<template>
  <div id="assets">
    <div class="nav">
      <span @click="navFlg = false" :class="!navFlg?'property active':'property'">{{$t("m.assets")}}</span>
      <!-- <span
        @click="navFlg = true"
        :class="!navFlg?'positions':'positions active'"
      >{{$t("m.position")}}</span>-->
    </div>
    <div class="rootMain">
      <div class="noLogin" v-if="isLogin ==2">{{$t('m.noLogin')}}</div>
      <!-- 用户资产 -->
      <div class="user" v-if="isLogin ==1">
        <div>
          <div>
            <h4>{{$t("m.totalAssets")}}</h4>
            <p
              class="center"
            >{{(userObj.vcAmount+userObj.vcConsumeAmount+userObj.vcWithdrawAmount) | toFixed8}} VC</p>
            <p
              class="red"
            >{{$t("m.assets5")}}： {{((userObj.vcAmount+userObj.vcConsumeAmount+userObj.vcWithdrawAmount)/vcRatio) |toFixed3}} CNN</p>
          </div>
          <!-- <div>
            <h4>{{$t('m.availableBalance')}}：</h4>
            <p>{{(userObj.vcAmount)}} VC</p>
            <p class="red">≈ {{(userObj.vcAmount)/vcRatio}} CNN</p>
          </div>-->
        </div>
      </div>
      <div class="content" v-if="isLogin==1">
        <!-- 资产页 主体 -->
        <div class="conList" v-if="!navFlg">
          <div class="lastItem" style="padding-bottom:0;">
            <div class="conTitle" style="margin-bottom:0;">
              <div class="left">
                <i>
                  <img src="@/assets/img/fuze/vc80.png" alt />
                </i>
                <i>VC</i>
              </div>
              <div :class="language == 'en_US'?'right en_right':'right'">
                <span class="btn" @click="goPage(1)">{{$t('m.buy')}}</span>
                <!-- <span class="btn" @click="goPage(7)">{{$t('m.coin')}}</span> -->
                <span class="btn" @click="withdrawalPop">{{$t('m.withdrawal')}}</span>
                <span class="btn" @click="goPage(3)">{{$t('m.transfer')}}</span>
              </div>
            </div>
          </div>
          <!-- vc资产 -->
          <div class="item itemS">
            <div>
              <p>
                <!-- {{$t('m.lockingAssets')}} -->
                {{$t('m.assets1')}}
                <!-- <van-icon @click="flage=!flage" name="question-o" /> -->
              </p>
              <span>
                <span>
                  <b>
                    {{(userObj.vcAmount) | toFixed8}}
                    <i
                      class="red"
                    >≈ {{(userObj.vcAmount/vcRatio) | toFixed3}} CNN</i>
                  </b>
                </span>
              </span>
            </div>
            <div>
              <p>{{$t('m.assets2')}}</p>
              <span>
                <span>
                  <b>
                    {{(userObj.vcWithdrawAmount) | toFixed8}}
                    <i
                      class="red"
                    >≈ {{(userObj.vcWithdrawAmount/vcRatio) | toFixed3}} CNN</i>
                  </b>
                </span>
              </span>
            </div>
            <div>
              <p>{{$t('m.assets3')}}</p>
              <span>
                <span>
                  <b>
                    {{(userObj.vcConsumeAmount) | toFixed8}}
                    <i
                      class="red"
                    >≈ {{(userObj.vcConsumeAmount/vcRatio) | toFixed3}} CNN</i>
                  </b>
                </span>
              </span>
            </div>
          </div>
          <div class="item arrow" v-if="flage">
            <p class="explain">
              <i></i>
              {{$t('m.tips1')}}
              <br />
              {{$t('m.tips2')}}
              <br />
              {{$t('m.tips2_1')}}
            </p>
          </div>
          <!-- 新手红包 -->
          <!-- <div :class="language == 'en_US'?'item en_item':'item'" v-if="newUser">
            <p>
              {{$t('m.gift')}}
              <van-icon @click="flage1=!flage1" name="question-o" />
            </p>
            <span>
              <b>
                888 VC≈
                <i class="red">{{(888/vcRatio).toFixed(2)}} CNN</i>
              </b>
              <label @click="showToast">{{$t('m.receive1')}}</label>
            </span>
          </div>
          <div class="item arrow" v-if="flage1">
            <p class="explain">
              <i></i>
              {{$t('m.tips2_3')}}
            </p>
          </div>-->
          <!-- 释放速度 -->
          <!-- <div class="item" v-if="false">
            <p>
              {{$t('m.releaseSpeed')}}
              <van-icon @click="flage2=!flage2" name="question-o" />
            </p>
            <span style="opacity: .5;">{{releaseRate}}%</span>
          </div>
          <div class="item arrow" v-if="flage2">
            <p class="explain">
              <i></i>
              {{$t('m.tips2_2')}}
            </p>
          </div>-->
          <!-- cnn资产 -->
          <div class="lastItem" style="border-bottom:2px solid #f2f2f2;padding-bottom:0;">
            <div class="conTitle">
              <div class="left">
                <i>
                  <img src="@/assets/img/fuze/cnn80.png" alt />
                </i>
                <i>CNN</i>
              </div>
              <div :class="language == 'en_US'?'right en_right':'right'">
                <span class="btn" @click="goPage(4)">{{$t('m.recharge')}}</span>
                <span class="btn" @click="goPage(5)">{{$t('m.withdraw')}}</span>
                <span class="btn" @click="goPage(6)">{{$t('m.transfer')}}</span>
              </div>
            </div>
            <div class="points">
              <p>
                {{$t('m.assets6')}}
                <b>{{(userObj.cnnAmount) | toFixed3}}</b>
              </p>
            </div>
            <div class="points">
              <p>
                {{$t('m.assets1')}}
                <b>{{(userObj.cnnWithdrawAmount) | toFixed3}}</b>
              </p>
            </div>
          </div>
          <!-- ETH资产 -->
          <div class="lastItem" style="border-bottom:2px solid #f2f2f2;padding-bottom:0;">
            <div class="conTitle">
              <div class="left">
                <i>
                  <img src="@/assets/img/fuze/eth80.png" alt />
                </i>
                <i>ETH</i>
              </div>
              <div :class="language == 'en_US'?'right en_right':'right'">
                <span class="btn" @click="goPage(8)">{{$t('m.recharge')}}</span>
              </div>
            </div>
            <div class="points">
              <p>
                {{$t('m.availableBalance')}}
                <b>{{userObj.ethAmount}}</b>
              </p>
            </div>
          </div>
        </div>
        <!-- 持仓页 主体 -->
        <ul v-if="!!navFlg">
          <div class="title">
            <h4 :class="fatherActive==1?'active':''" @click="tabF(0)">{{$t('m.buy')}}</h4>
          </div>
          <van-list
            v-model="loading"
            v-if="fatherActive == 1"
            :finished-text="$t('m.noMore')"
            :loading-text="$t('m.loading')"
            :offset="100"
            :finished="finished"
            @load="onLoad"
          >          
          </van-list>
        </ul>
      </div>
    </div>
    <van-popup v-model="show" class="giftList">
      <div class="gift_title">{{$t('m.giftDetail')}}</div>
      <div class="gift_con">
        <div class="title">
          <span>{{$t('m.fundName')}}</span>
          <span>{{$t('m.releaseTime')}}</span>
          <span>{{$t('m.releaseQuantity')}}</span>
        </div>
        <div class="list">
          <div class="item" v-for="(item,index)  in giftList" :key="index">
            <span>VC</span>
            <span>
              <label>{{item.createTime}}</label>
            </span>
            <!-- <span>{{(item.actualAmount).toFixed(2)}}</span> -->
          </div>
        </div>
      </div>
    </van-popup>
    <div v-show="giftpack" class="giftpackBox" @click="giftpack=false">
      <div class="giftpack">{{$t('m.tips2_4')}}</div>
    </div>
    <van-popup
      v-model="showWithdrawal"
      position="bottom"
      round
      :style="{ height: '40%' }"
      class="withdrawalPop"
    >
      <div class="pop-title">{{$t('m.assets4')}}</div>
      <div class="pop-con">
        <div class="list">
          <div class="item" @click="goPage(2,1)">{{$t('m.assets1')}}</div>
          <div class="item" @click="goPage(2,2)">{{$t('m.assets2')}}</div>
        </div>
      </div>
    </van-popup>
    <Footer></Footer>
    <RootLoading v-show="rootLoading"></RootLoading>
  </div>
</template>
<script>
import Services from "@/service/index.js";
import { mapMutations, mapState } from "vuex";
import Header from "@/components/header";
import Footer from "@/components/footer";
import RootLoading from "@/components/rootLoading";
import axios from "axios";
import { Toast, Popup, Dialog } from "vant";
export default {
  data() {
    return {
      loginToken: "",
      userObj: {},
      freezeGccValue: "",
      flage: false,
      flage1: false,
      flage2: false,
      navFlg: false,
      loading: false,
      finished: false,
      total: 0,
      pageNum: 0,
      pageSize: 10,
      givePoints: "0",
      releaseRate: "0",
      newUser: false,
      gift: "",
      giftList: [],
      show: false,
      vcRatio: "", //利率
      gccBuyOrder: [],
      getWdyEthTxn: [],
      fatherActive: 1,
      language: "",
      giftpack: false,
      // deling 00
      showWithdrawal: false,
      isLogin: "",
      rootLoading: false
    };
  },
  created() {
    this.changeTitle("VC");
    this.changetabbarIndex(2);
    this.loginToken = localStorage.getItem("token")
      ? localStorage.getItem("token")
      : "";
    this.language = localStorage.getItem("language");
    this.rootLoading = true;
    Services.getUser({
      token: this.loginToken,
      lang: localStorage.getItem("language")
    }).then(res => {
      this.rootLoading = false;
      if (res.code == "0000") {
        this.isLogin = 1;
        this.userObj = res.user;
        // this.freezeGccValue = res.freezeGccValue;
        this.givePoints = res.user.givePoints;
        this.releaseRate = res.releaseRate;
        localStorage.setItem("userObj", JSON.stringify(this.userObj));
        // 获取新手红包
        // Services.getGiftPackList({
        //   token: this.loginToken
        // }).then(res => {
        //   if (res.code == "0000") {
        //     if (res.list.length != 0) {
        //       this.newUser = true;
        //       this.gift = res.list[0];
        //     }
        //   } else {
        //     Toast(res.msg);
        //   }
        // });
        // 获取汇率
        Services.getConfig({ lang: localStorage.getItem("language") }).then(
          res => {
            if (res.code == "0000") {
              this.vcRatio = res.vcRatio;
            }
          }
        );
      } else {
        Toast(res.msg);
        localStorage.removeItem("token");
        localStorage.removeItem("userObj");
        // sessionStorage.setItem("loginBack", true);
        this.isLogin = 2;
        // this.$router.push(`/login`);
      }
    });

    //    Services.gccBuyOrder(this.loginToken,{
    //      pageNum: 1,
    //      pageSize: 10,
    //      lang: localStorage.getItem("language")
    //    }).then(res => {
    //      if (res.code == "0000") {
    //        this.gccBuyOrder = res.list;
    //      } else {
    //        Toast(res.msg);
    //      }
    //    });
    //    Services.getWdyEthTxn(this.loginToken,{
    //      pageNum: 1,
    //      pageSize: 10,
    //      lang: localStorage.getItem("language")
    //    }).then(res => {
    //      if (res.code == "0000") {
    //        this.getWdyEthTxn = res.list;
    //      } else {
    //        Toast(res.msg);
    //      }
    //    });
  },
  filters: {
    toFixed3(value) {
      let realVal = "";
      if (!isNaN(value) && value !== "") {
        realVal = parseFloat(value).toFixed(3);
      } else {
        realVal = "--";
      }
      return realVal;
    },
    toFixed8(value) {
      let realVal = "";
      if (!isNaN(value) && value !== "") {
        realVal = parseFloat(value).toFixed(8);
      } else {
        realVal = "--";
      }
      return realVal;
    }
  },
  components: { Header, Footer, RootLoading },
  computed: {},
  methods: {
    ...mapMutations(["changeTitle", "changetabbarIndex"]),
    tabF(index) {
      if (index == 0) {
        if (this.fatherActive == 1) {
          return false;
        }
        this.fatherActive = 1;
      } else {
        if (this.fatherActive == 2) {
          return false;
        }
        this.fatherActive = 2;
      }
      this.pageNum = 0;
      this.total = 0;
      this.loading = true;
      this.finished = false;
      this.gccBuyOrder = [];
      if (this.isLogin == 1) {
        this.getRecord();
      }
      this.scrollList = false;
    },
    // end
    onLoad(type) {
      setTimeout(() => {
        // 加载状态结束
        if (this.pageNum != 0 && this.pageNum * 10 >= this.total) {
          this.finished = true;
          return;
        }
        this.getRecord();
      }, 500);
    },
    //获取列表
    getRecord() {
      this.pageNum = this.pageNum + 1;
      if (this.fatherActive == 1) {
        //购买记录
        Services.gccBuyOrder(this.loginToken, {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          lang: localStorage.getItem("language")
        }).then(res => {
          if (res.code == "0000") {
            this.gccBuyOrder = this.gccBuyOrder.concat(res.list);
            this.total = res.page.total;
            this.loading = false;
            if (this.pageNum * 10 >= this.total) {
              this.finished = true;
            }
          } else {
            this.finished = true;
            this.loading = false;
            Toast(res.msg);
          }
        });
      } else {
        //充值记录
        Services.getWdyEthTxn(this.loginToken, {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          lang: localStorage.getItem("language")
        }).then(res => {
          if (res.code == "0000") {
            this.gccBuyOrder = this.gccBuyOrder.concat(res.list);
            this.total = res.page.total;
            this.loading = false;
            if (this.pageNum * 10 >= this.total) {
              this.finished = true;
            }
          } else {
            this.loading = false;
            this.finished = true;
            Toast(res.msg);
          }
        });
      }
    },
    //提币选择类型弹窗
    withdrawalPop() {
      this.showWithdrawal = true;
    },
    goPage(id, option) {
      if (id == 1) {
        // VC 购买
        // this.$router.push(`/buy`);
        this.$router.push(`/quotationTrade`);
      } else if (id == 2) {
        //   type 1  VC 提币  option 1 可提资产  2 理财资产
        this.showWithdrawal = false;
        this.$router.push(`/withdrawDeposit?type=1&option=${option}`);
      } else if (id == 3) {
        // VC 划转
        this.$router.push(`/withdrawMoney?type=1`);
      } else if (id == 4) {
        // CNN 充值
        this.$router.push(`/recharge?type=2`);
      } else if (id == 5) {
        // CNN 提现
        this.$router.push(`/withdrawDeposit?type=2`);
      } else if (id == 6) {
        // CNN 划转
        this.$router.push(`/withdrawMoney?type=2`);
      } else if (id == 7) {
        // VC 充值
        this.$router.push(`/recharge?type=1`);
      } else if ((id = 8)) {
        this.$router.push(`/rechargeCoin`);
      }
    },
    showToast() {
      Services.getGiftPackReleaseList({
        token: this.loginToken,
        id: this.gift.id
      }).then(res => {
        if (res.code == "0000") {
          if (res.list.length == 0) {
            this.giftpack = true;
          } else {
            this.giftList = res.list;
            this.show = true;
          }
        } else {
          Toast(res.msg);
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped type="text/scss">
#assets {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  .nav {
    padding: 0 0.3rem;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0.88rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background: #fff;
    box-shadow: 0 0.05rem 0.1rem rgba(0, 0, 0, 0.07);
    z-index: 999;
    span {
      display: flex;
      justify-content: center;
      align-items: center;
      color: #a8a7ab;
      font-size: 0.22rem;
      height: 100%;
      letter-spacing: 0.02rem;
      padding: 0 0.1rem;
      position: relative;
      &.active {
        font-size: 0.3rem;
        font-weight: bold;
        color: #40404c;
        &::after {
          content: "";
          display: block;
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 0.5rem;
          height: 0.05rem;
          background: #e4b577;
        }
      }
    }
  }
  .rootMain {
    height: calc(100% - 1.88rem);
    top: 0.88rem;
    overflow-y: auto;
    background: #f2f2f2;
    .noLogin {
      height: 3rem;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #a8a7ab;
    }
    .conTitle {
      height: 0.6rem;
      display: flex;
      justify-content: space-around;
      // margin-bottom: 0.3rem;
      div {
        height: 0.6rem;
        display: flex;
        align-items: center;
        &.left {
          width: 1.4rem;
          i {
            margin-right: 0.1rem;
            img {
              width: 0.4rem;
              height: 0.4rem;
            }
          }
        }
        &.right {
          flex: 1;
          justify-content: flex-end;
          .btn {
            margin: 0;
            width: 1.2rem;
            line-height: 0.6rem;
            height: 0.6rem;
            margin-left: 0.1rem;
            font-size: 0.28rem;
          }
          &.en_right {
            .btn {
              letter-spacing: 0;
              font-size: 0.24rem;
            }
          }
        }
      }
    }
    .user {
      padding: 0.5rem 0.3rem;
      height: 3.6rem;
      /*height: 2.6rem;*/
      /*background: linear-gradient(to left, #738aff, #5b60ff);*/
      /*box-shadow: 0 0 0.3rem #738aff;*/
      /*text-align: center;*/
      > div {
        // background: linear-gradient(right, #43434e, #727181);
        background: linear-gradient(135deg, #d8d8d8, #ebebeb);
        width: 100%;
        height: 2.6rem;
        border-radius: 0.1rem;
        box-shadow: 0.1rem 0.1rem 0.1rem #e7e7e7;
        display: flex;
        align-items: center;
        div {
          flex: 1;
          // border-right: 0.02rem solid #e0e0e0;
          height: 100%;
          color: #40404c;
          padding: 0.36rem;
          font-size: 0.32rem;
          p {
            font-size: 0.28rem;
            padding: 0.2rem 0 0 0;
            &.center {
              padding: 0.3rem 0;
              text-align: center;
              font-size: 0.4rem;
              font-weight: bold;
              color: #e4b577;
            }
            &.red {
              font-size: 0.24rem;
            }
          }
          &:last-child {
            border: none;
          }
        }
      }
      .userBox {
        margin: 0 auto 0.2rem;
        width: 2rem;
        height: 2rem;
        position: relative;
        .animationbox {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background: #fff;
          opacity: 0;
          border-radius: 50%;
          animation: opacity 3s 1s infinite;
          &:nth-of-type(2) {
            animation-delay: 1.5s;
          }
        }
      }
      .text {
        margin: 0.2rem 0;
        color: #fff;
      }
    }
    .content {
      background: #fff;
      color: #40404c;
      height: calc(100% - 3.6rem);
      .conList {
        background: #fff;
        .item {
          min-height: 0.97rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 0.3rem;
          color: #40404c;
          border-bottom: 2px solid #f2f2f2;
          &.itemS {
            display: block;
            > div {
              height: 1rem;
              display: flex;
              justify-content: space-between;
              align-items: center;
              span {
                i {
                  font-size: 0.22rem;
                }
              }
            }
          }
          span {
            label {
              margin-left: 0.2rem;
              background: #fff;
              padding: 0.1rem 0.2rem;
              border-radius: 0.1rem;
            }
          }
          &:nth-of-type(2n) {
            &.arrow {
              background: #f8f8f8;
              border: none;
              &::after {
                border-bottom-color: #f2f2f2;
              }
            }
            span {
              label {
                background: #434551;
              }
            }
          }
          &.arrow {
            position: relative;
            padding: 0.1rem 0.5rem;
            border: none;
            background: #f8f8f8;
            &::after {
              content: "";
              display: block;
              width: 0;
              height: 0;
              position: absolute;
              top: -0.52rem;
              left: 19%;
              border: 0.26rem solid #f2f2f2;
              border-top-color: transparent;
              border-left-color: transparent;
              border-right-color: transparent;
            }
            p {
              line-height: 0.3rem;
            }
          }

          .explain {
            font-size: 0.2rem;
          }
          .van-icon {
            cursor: pointer;
            margin-left: 0.06rem;
          }
          &.en_item {
            font-size: 0.24rem;
            span {
              label {
                margin-left: 0;
                padding: 0.1rem 0.1rem;
              }
            }
          }
        }
        .lastItem {
          padding: 0.3rem;
          .points {
            // margin-bottom: 0.3rem;
            p {
              height: 1rem;
              display: flex;
              align-items: center;
              justify-content: space-between;
            }
          }
        }
      }
      > .conTitle {
        padding: 0.2rem 0.3rem 0;
      }
      > ul {
        > div {
          padding: 0 0.3rem;
        }
        .title {
          display: flex;
          justify-content: flex-start;
          height: 0.75rem;
          background: #f8f8f8;
          padding: 0;
          margin-bottom: 0.2rem;
          h4 {
            min-width: 1.48rem;
            padding: 0 0.1rem;
            line-height: 0.75rem;
            font-size: 0.26rem;
            font-weight: bold;
            text-align: center;
            letter-spacing: 0.02rem;
            color: #a8a7ab;
            border-bottom: 0.02rem solid transparent;
            &.active {
              color: #40404c;
              border-bottom: 0.02rem solid #e4b577;
            }
          }
        }
        li {
          background: #f2f2f2;
          width: 100%;
          height: 2rem;
          border-radius: 0.1rem;
          margin-bottom: 0.2rem;
          padding: 0 0.2rem;
          h6 {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.2rem 0 0.1rem 0;
            span {
              display: flex;
              align-items: center;
              label {
                margin-left: 0.2rem;
                color: #aaa;
                font-size: 0.2rem;
              }
              img {
                width: 0.32rem;
                margin-left: 0.1rem;
              }
            }
          }
          p {
            display: flex;
            font-size: 0.24rem;
            justify-content: space-between;
            align-items: center;
            padding: 0.05rem 0;
            color: #aaa;
            span {
              flex: 1;
              &:nth-child(2) {
                text-indent: 0.8rem;
              }
            }
          }
        }
      }
    }
  }
  // 提币弹窗
  .withdrawalPop {
    .pop-title {
      height: 1rem;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 0.26rem;
      font-weight: bold;
      border-bottom: 0.04rem solid #ececec;
    }
    .pop-con {
      background: #fefefe;
      height: calc(100% - 1.04rem);
      .list {
        padding: 0.1rem 0.5rem;
        .item {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 1rem;
          font-size: 0.26rem;
          border-bottom: 1px solid #f3f3f3;
        }
      }
    }
  }

  .giftpackBox {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 1000;

    .giftpack {
      width: 70%;
      border-radius: 0.1rem;
      padding: 0.6rem 0.3rem;
      text-align: justify;
      line-height: 1.5em;
      background: rgba(0, 0, 0, 0.7);
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
      color: #fff;
    }
  }
  .giftList {
    width: 80%;
    height: 50%;
    border-radius: 0.1rem;
    overflow: hidden;
    .gift_title {
      height: 0.75rem;
      font-weight: bold;
      display: flex;
      justify-content: center;
      align-items: center;
      border-bottom: 1px solid #ddd;
    }
    .gift_con {
      height: calc(100% - 0.75rem);
      .title {
        height: 0.55rem;
        display: flex;
        justify-content: space-around;
        align-items: center;
        span {
          width: 33.333%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
      .list {
        height: calc(100% - 0.55rem);
        overflow: hidden;
        overflow-y: auto;
        padding-bottom: 0.3rem;
        .item {
          padding: 0.1rem 0;
          display: flex;
          justify-content: space-around;
          align-items: center;
          &:nth-of-type(2n) {
            background: #f1f1f1;
          }
          span {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 33.333%;
            label {
              line-height: 1.2;
              text-align: center;
            }
          }
        }
      }
    }
  }
}
</style>